<template>
    <div class="page-100 login-register-part">
        <yd-cell-item style="padding-bottom: 20px">
            <img  slot="left" class="login-img" src="../../assets/loginxingming.png">
            <input slot="right" type="text" placeholder="姓名" v-model="name" maxlength="20">
        </yd-cell-item>
        <yd-cell-item style="padding-bottom: 20px">
            <img  slot="left" class="login-img" src="../../assets/loginmobile.png">
            <yd-input slot="right" v-model="mobile" regex="mobile" placeholder="手机号"></yd-input>

            <!--<input slot="right" type="text" placeholder="手机号" v-model="mobile" maxlength="20">-->
        </yd-cell-item>
        <yd-cell-item style="padding-bottom: 20px">

            <img  slot="left" class="login-img" src="../../assets/loginyanz.png">
            <input slot="right" type="text" placeholder="短信验证码" v-model="captcha" oninput="if (value.length>6) value=value.slice(0,6)">
            <yd-sendcode slot="right"
                         v-model="startcode"
                         @click.native="sendCaptcha"
                         type="primary"
            ></yd-sendcode>
        </yd-cell-item>
        <yd-cell-item style="padding-bottom: 20px">
            <img  slot="left" class="login-img" src="../../assets/loginsouzaidi.png">
            <input @click="handleAddressClick" slot="right" type="text" placeholder="所在地" v-model="address">
        </yd-cell-item>
        <yd-cell-item style="padding-bottom: 20px">
            <img  slot="left" class="login-img" src="../../assets/logindanwei.png">
            <input @click="handleShowPlace" slot="right" type="text" placeholder="所在单位" v-model="place" maxlength="20">
        </yd-cell-item>
        <yd-cell-item style="padding-bottom: 20px">
            <img  slot="left" class="login-img" src="../../assets/loginjigou.png">
            <input slot="right" type="text" placeholder="所属机构" v-model="inst">
        </yd-cell-item>
        <weui-distpicker
                v-if="isShowAddresPick"
                @confirm="onAddresConfirm"
                @cancel="onAddresCancel"
                province="浙江省" city="杭州市" area="滨江区"></weui-distpicker>
        <yd-button  size="large" type="primary" @click.native="handleClick" style="background-color:#3cc8a8;color:white;height: 40px">提交</yd-button>

    </div>
</template>

<script>
    export default {
        name: "loginEmployeeRegistry",
        data() {
            return {
                name: '',
                mobile: '',
                captcha: '',
                place: '',
                address: '',
                inst: '',
                startcode: false,
                isShowAddresPick: false,
            }
        },
        methods: {
            handleClick() {

            },
            sendCaptcha() {
                this.$dialog.loading.open('发送中...');
                setTimeout(() => {

                    this.startcode = true;
                    this.$dialog.loading.close();

                    this.$dialog.toast({
                        mes: '已发送',
                        timeout: 1500
                    });

                }, 1000);
            },
            handleAddressClick() {
                this.isShowAddresPick = true;
            },
            onAddresConfirm(data) {
                this.isShowAddresPick = false;
                var province = data[0].label;
                var city = data.length >= 2 ? data[1].label : '';
                var area = data.length == 3 ? data[2].label : '';
                console.log(data);
                this.address = province + city + area;
            },
            onAddresCancel() {
                this.isShowAddresPick = false;
            },
            handleShowPlace() {



                let that = this;
                //模拟数据
                weui.picker([
                        {
                            label: '展鸿科技有限公司',
                            value: 0
                        },
                        {
                            label: '机构1',
                            value: 1
                        },
                        {
                            label: '机构2',
                            value: 2
                        },
                        {
                            label: '机构3',
                            value: 3
                        },
                        {
                            label: '机构4',
                            value: 4
                        },
                    ], {
                        onChange(result) {
                            console.log(result);
                        },
                        onConfirm(result) {
                            console.log(result);
                            that.place = result[0].label;
                            console.log(result[0].label);
                        },
                    },
                );
            },
        }
    }
</script>

<style lang="scss">
    @import "../login/login.scss";
</style>